<script setup lang="ts">
defineOptions({
  name: "CUSSystem"
});
import { ref, computed, onMounted } from "vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import chartsHumidness from "@/views/machine/operation/overView/components/chartsHumidness.vue";
import { queryChildByTypeCodeAndItemValue } from "@/api/waterClass";
import { querySpecValues } from "@/api/machineApi";

interface Props {
  /**  有 title 时传入 */
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  button?: string;
  /**  模块最低宽度，默认 330px */
  width?: number;
  /**  模块最低高度，默认 200px */
  height?: number;
  /**  是否需要背景阴影，默认为true */
  boxShadow?: boolean;
  /**  是否需要圆角，默认为true */
  borderRidus?: boolean;
  /**  是否暗色，默认为false */
  dark?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: "CUS中央动力系统",
  dark: false,
  width: 330,
  height: 200,
  boxShadow: false,
  borderRidus: true
});

interface Emits {
  /**  title 右侧按钮点击后触发 */
  (event: "btn-click"): void;
}

const emits = defineEmits<Emits>();

const title_height = computed(() => (props.title ? "38px" : "0px"));
const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);

const autoplay = ref(false);
const paiqiList = ref<any>([]);

const dwbsPoint = ref("");
const zwbsPoint = ref("");
const zwrsPoint = ref("");
const gwrsPoint = ref("");

const dwbsUnit = ref("");
const zwbsUnit = ref("");
const zwrsUnit = ref("");
const gwrsUnit = ref("");
const dwbsName = ref("");
const zwbsName = ref("");
const zwrsName = ref("");
const gwrsName = ref("");

const dwbsUnit1 = ref("");
const zwbsUnit1 = ref("");
const zwrsUnit1 = ref("");
const gwrsUnit1 = ref("");
const dwbsName1 = ref("");
const zwbsName1 = ref("");
const zwrsName1 = ref("");
const gwrsName1 = ref("");

const dwbsPoint1 = ref("");
const zwbsPoint1 = ref("");
const zwrsPoint1 = ref("");
const gwrsPoint1 = ref("");

const lchw1Point = ref("");
const lchw2Point = ref("");
const lchw3Point = ref("");
const mchw1Point = ref("");
const mchw2Point = ref("");
const mchw3Point = ref("");
const mchwchr1Point = ref("");
const mchwchr2Point = ref("");
const mchwPoint = ref("");

const lchwPointName = ref("");
const lchwPointUnit = ref("");
const lchwPointValue = ref<any>("");
const lchwPointName1 = ref("");
const lchwPointUnit1 = ref("");
const lchwPointValue1 = ref<any>("");
const lchwPointName2 = ref("");
const lchwPointUnit2 = ref("");
const lchwPointValue2 = ref<any>("");
const mchwPointName = ref("");
const mchwPointUnit = ref("");
const mchwPointValue = ref<any>("");
const mchwPointName1 = ref("");
const mchwPointUnit1 = ref("");
const mchwPointValue1 = ref<any>("");
const mchwPointName2 = ref("");
const mchwPointUnit2 = ref("");
const mchwPointValue2 = ref<any>("");
const gwrsPointName = ref("");
const gwrsPointUnit = ref("");
const gwrsPointValue = ref<any>("");
const zwrsPointName = ref("");
const zwrsPointUnit = ref("");
const zwrsPointValue = ref<any>("");
const zwrsPointName1 = ref("");
const zwrsPointUnit1 = ref("");
const zwrsPointValue1 = ref<any>("");

const lchw1PointCode = ref("");
const lchw2PointCode = ref("");
const lchw3PointCode = ref("");
const mchw1PointCode = ref("");
const mchw2PointCode = ref("");
const mchw3PointCode = ref("");
const mchwchr1PointCode = ref("");
const mchwchr2PointCode = ref("");
const mchwPointCode = ref("");

const dwbsMax = ref("");
const dwbsMin = ref("");
const zwbsMax = ref("");
const zwbsMin = ref("");
const zwrsMax = ref("");
const zwrsMin = ref("");
const gwrsMax = ref("");
const gwrsMin = ref("");

const point1 = ref("");
const point2 = ref("");
const point3 = ref("");
const point4 = ref("");

const clickHandler = () => emits("btn-click");

const getCode = (code, list) => {
  if (code == "MICROOMSTATUS9") {
    return list.find(e => e.itemValue === "MICROOMSTATUS9").itemName;
  } else {
    return list.find(e => e.itemValue === code) ? JSON.parse(list.find(e => e.itemValue === code)?.itemDesc.replace(/[\r|\n|\t]/g, "")).code : "";
  }
};

const getName = (code, list) => {
  return list.find(e => e.itemValue === code) ? JSON.parse(list.find(e => e.itemValue === code)?.itemDesc.replace(/[\r|\n|\t]/g, "")).name : "";
};

const getUnit = (code, list) => {
  return list.find(e => e.itemValue === code) ? JSON.parse(list.find(e => e.itemValue === code)?.itemDesc.replace(/[\r|\n|\t]/g, "")).unit : "";
};

const getSPC = (code, list) => {
  return list.find(e => e.itemValue === code)
    ? JSON.parse(list.find(e => e.itemValue === code)?.itemDesc.replace(/[\r|\n|\t]/g, "")).point_position
    : "";
};

const getLastValue = (code, dataList, list) => {
  const pointPosition = list.find(e => e.itemValue === code)
    ? JSON.parse(list.find(e => e.itemValue === code)?.itemDesc.replace(/[\r|\n|\t]/g, ""))?.point_position
    : null;
  const findObj = dataList.rows.find(i => i.point === pointPosition);
  if (pointPosition) {
    return findObj && findObj.last_value ? findObj.last_value : "";
  }
  return "";
};

const showStatusPoint = val => {
  if (val === 1 || val === "1" || val === 1.0 || val === "1.00") {
    return false;
  } else if (val === 0 || val === "0" || !val) {
    return true;
  } else {
    return true;
  }
};

setTimeout(() => {
  autoplay.value = true;
}, 15000);

const getYaxis = (key, name, list) => {
  const item = list.find(e => e.itemValue === key);
  return item ? JSON.parse(item?.itemDesc.replace(/[\r|\n|\t]/g, ""))[name] : null;
};

onMounted(async () => {
  const dataList: any = await queryChildByTypeCodeAndItemValue({
    value: "CUSKBZB",
    typeCode: "MCTS"
  });
  const spclist33 = dataList.map(item => JSON.parse(item?.itemDesc.replace(/[\r|\n|\t]/g, "")));
  const codes = ["ZWBSZLSKB201", "GWRSKB007", "ZWBSKB006", "DWBSKB005", "DWBSRO101", "DWBSZLSKB101", "ZWRSZLS301", "ZWBSRO202", "ZWRSRO302"];
  const addCusCodes = dataList.filter(item => codes.includes(item.itemValue));

  lchwPointName.value = getName("DWBSKB005", addCusCodes);
  lchwPointName1.value = getName("DWBSZLSKB101", addCusCodes);
  lchwPointName2.value = getName("DWBSRO101", addCusCodes);
  mchwPointName.value = getName("ZWBSKB006", addCusCodes);
  mchwPointName1.value = getName("ZWBSZLSKB201", addCusCodes);
  mchwPointName2.value = getName("ZWBSRO202", addCusCodes);
  gwrsPointName.value = getName("GWRSKB007", addCusCodes);
  zwrsPointName.value = getName("ZWRSKB003", dataList);
  zwrsPointName1.value = getName("ZWRSRO302", addCusCodes);

  lchwPointUnit.value = getUnit("DWBSKB005", addCusCodes);
  lchwPointUnit1.value = getUnit("DWBSZLSKB101", addCusCodes);
  lchwPointUnit2.value = getUnit("DWBSRO101", addCusCodes);
  mchwPointUnit.value = getUnit("ZWBSKB006", addCusCodes);
  mchwPointUnit1.value = getUnit("ZWBSZLSKB201", addCusCodes);
  mchwPointUnit2.value = getUnit("ZWBSRO202", addCusCodes);
  gwrsPointUnit.value = getUnit("GWRSKB007", addCusCodes);
  zwrsPointUnit.value = getUnit("ZWRSKB003", dataList);
  zwrsPointUnit1.value = getUnit("ZWRSRO302", addCusCodes);

  // const spclist33 = response.map(item => JSON.parse(item?.itemDesc.replace(/[\r|\n|\t]/g, "")));
  // point1.value = spclist33.find(e => e?.name == "低温冰水")?.point_position;
  // point2.value = spclist33.find(e => e?.name == "中温冰水")?.point_position;
  // point3.value = spclist33.find(e => e?.name == "中温热水")?.point_position;
  // point4.value = spclist33.find(e => e?.name == "高温热水")?.point_position;

  dwbsMax.value = getYaxis("DWBSKB005", "max", dataList);
  dwbsMin.value = getYaxis("DWBSKB005", "min", dataList);
  zwbsMax.value = getYaxis("ZWBSKB006", "max", dataList);
  zwbsMin.value = getYaxis("ZWBSKB006", "min", dataList);
  zwrsMax.value = getYaxis("ZWRSKB003", "max", dataList);
  zwrsMin.value = getYaxis("ZWRSKB003", "min", dataList);
  gwrsMax.value = getYaxis("GWRSKB007", "max", dataList);
  gwrsMin.value = getYaxis("GWRSKB007", "min", dataList);

  dwbsUnit.value = getUnit("GSWDDWBS", dataList);
  zwbsUnit.value = getUnit("GSWDZWBS", dataList);
  zwrsUnit.value = getUnit("GSWDZWRS", dataList);
  gwrsUnit.value = getUnit("GSWDGWRS", dataList);
  dwbsName.value = getName("GSWDDWBS", dataList);
  zwbsName.value = getName("GSWDZWBS", dataList);
  zwrsName.value = getName("GSWDZWRS", dataList);
  gwrsName.value = getName("GSWDGWRS", dataList);

  dwbsUnit1.value = getUnit("HSWDDWBS", dataList);
  zwbsUnit1.value = getUnit("HSWDZWBS", dataList);
  zwrsUnit1.value = getUnit("HSWDZWRS", dataList);
  gwrsUnit1.value = getUnit("HSWDGWRS", dataList);
  dwbsName1.value = getName("HSWDDWBS", dataList);
  zwbsName1.value = getName("HSWDZWBS", dataList);
  zwrsName1.value = getName("HSWDZWRS", dataList);
  gwrsName1.value = getName("HSWDGWRS", dataList);

  point1.value = getSPC("DWBSKB005", dataList);
  point2.value = getSPC("ZWBSKB006", dataList);
  point3.value = getSPC("ZWRSKB003", dataList);
  point4.value = getSPC("GWRSKB007", dataList);
  paiqiList.value = spclist33;
  const response: any = await queryChildByTypeCodeAndItemValue({
    value: "MICROOMSZB",
    typeCode: "MCTS"
  });
  const tempList = response
    .concat(dataList)
    .filter(item => item.itemValue.includes("MICROOMSTATUS") || item.itemValue.includes("GSWD") || item.itemValue.includes("HSWD"));
  const pointLists = tempList.concat(addCusCodes);
  lchw1PointCode.value = getCode("MICROOMSTATUS1", pointLists);
  lchw2PointCode.value = getCode("MICROOMSTATUS2", pointLists);
  lchw3PointCode.value = getCode("MICROOMSTATUS3", pointLists);
  mchw1PointCode.value = getCode("MICROOMSTATUS4", pointLists);
  mchw2PointCode.value = getCode("MICROOMSTATUS5", pointLists);
  mchw3PointCode.value = getCode("MICROOMSTATUS6", pointLists);
  mchwchr1PointCode.value = getCode("MICROOMSTATUS7", pointLists);
  mchwchr2PointCode.value = getCode("MICROOMSTATUS8", pointLists);
  mchwPointCode.value = getCode("MICROOMSTATUS9", pointLists);
  const spclist3 = tempList.map(item => JSON.parse(item?.itemDesc.replace(/[\r|\n|\t]/g, "")));
  const spclist4 = addCusCodes.map(item => JSON.parse(item?.itemDesc.replace(/[\r|\n|\t]/g, "")));
  const arr = [];
  spclist3.forEach((element: any) => {
    arr.push(element.point_position);
  });
  spclist4.forEach((item: any) => {
    arr.push(item.point_position);
  });
  const res: any = await querySpecValues([...arr]);
  const resData =
    res.rows && res.rows.length
      ? res
      : {
          innerServiceErrorMsg: null,
          total: 0,
          pageSize: 0,
          currentPageNum: 0,
          totalPage: 0,
          rows: [],
          jsonRows: null
        };
  // 供水温度
  dwbsPoint.value = getLastValue("GSWDDWBS", resData, pointLists);
  zwbsPoint.value = getLastValue("GSWDZWBS", resData, pointLists);
  zwrsPoint.value = getLastValue("GSWDZWRS", resData, pointLists);
  gwrsPoint.value = getLastValue("GSWDGWRS", resData, pointLists);

  // 回水温度
  dwbsPoint1.value = getLastValue("HSWDDWBS", resData, pointLists);
  zwbsPoint1.value = getLastValue("HSWDZWBS", resData, pointLists);
  zwrsPoint1.value = getLastValue("HSWDZWRS", resData, pointLists);
  gwrsPoint1.value = getLastValue("HSWDGWRS", resData, pointLists);

  lchw1Point.value = getLastValue("MICROOMSTATUS1", resData, pointLists);
  lchw2Point.value = getLastValue("MICROOMSTATUS2", resData, pointLists);
  lchw3Point.value = getLastValue("MICROOMSTATUS3", resData, pointLists);
  mchw1Point.value = getLastValue("MICROOMSTATUS4", resData, pointLists);
  mchw2Point.value = getLastValue("MICROOMSTATUS5", resData, pointLists);
  mchw3Point.value = getLastValue("MICROOMSTATUS6", resData, pointLists);
  mchwchr1Point.value = getLastValue("MICROOMSTATUS7", resData, pointLists);
  mchwchr2Point.value = getLastValue("MICROOMSTATUS8", resData, pointLists);
  mchwPoint.value = getLastValue("MICROOMSTATUS9", resData, pointLists);

  lchwPointValue.value = getLastValue("DWBSKB005", resData, pointLists);
  lchwPointValue1.value = getLastValue("DWBSZLSKB101", resData, pointLists);
  lchwPointValue2.value = getLastValue("DWBSRO101", resData, pointLists);
  mchwPointValue.value = getLastValue("ZWBSKB006", resData, pointLists);
  mchwPointValue1.value = getLastValue("ZWBSZLSKB201", resData, pointLists);
  mchwPointValue2.value = getLastValue("ZWBSRO202", resData, pointLists);
  gwrsPointValue.value = getLastValue("GWRSKB007", resData, pointLists);
  zwrsPointValue.value = getLastValue("ZWRSZLS301", resData, pointLists);
  zwrsPointValue1.value = getLastValue("ZWRSRO302", resData, pointLists);
});
</script>

<template>
  <div class="model-content" :class="{ boxShadow, borderRidus, 'model-title-com-dark': dark }">
    <modelTitle v-if="title" :title="title">
      <div class="model-title-slot">
        <px-button v-if="button" type="primary" size="small" plain @click="clickHandler">{{ button }}</px-button>
      </div>
    </modelTitle>
    <div class="model_chart model_chart_con">
      <div class="cus_con">
        <div class="humidnessDom4">
          <chartsHumidness
            :color="'#3B82F6'"
            :ooctag="false"
            :title="lchwPointName"
            :jobId="point1"
            :width="'100%'"
            :height="'100%'"
            :max="dwbsMax"
            :min="dwbsMin"
            :unit="lchwPointUnit"
            :type="`${dark ? 'dark' : ''}`"
          />
          <div class="bg-purple">
            <div v-if="dwbsName != ''" class="bg-text">{{ dwbsName }}</div>
            <div v-if="dwbsPoint && dwbsUnit" class="bg-value">{{ dwbsPoint }}{{ dwbsUnit }}</div>
            <div v-if="dwbsName1 != ''" class="bg-text">{{ dwbsName1 }}</div>
            <div v-if="dwbsPoint1 && dwbsUnit1" class="bg-value">{{ dwbsPoint1 }}{{ dwbsUnit1 }}</div>
            <!-- <div class="bg-small">
              {{ lchwPointName + ":" + (lchwPointValue == null ? "-" : lchwPointValue) + lchwPointUnit }}
            </div> -->
            <!-- <div class="bg-small">
              {{ lchwPointName1 + ":" + (lchwPointValue1 == null ? "-" : lchwPointValue1) + lchwPointUnit1 }}
            </div>
            <div class="bg-small">
              {{ lchwPointName2 + ":" + (lchwPointValue2 == null ? "-" : lchwPointValue2) + lchwPointUnit2 }}
            </div> -->
            <!-- <div class="bg-small">
              <span class="status_point" :style="{ backgroundColor: showStatusPoint(lchw1Point) ? '#10B981' : '#EF4444' }" />
              {{ lchw1PointCode }}
            </div>
            <div class="bg-small">
              <span class="status_point" :style="{ backgroundColor: showStatusPoint(lchw2Point) ? '#10B981' : '#EF4444' }" />
              {{ lchw2PointCode }}
            </div>
            <div class="bg-small">
              <span class="status_point" :style="{ backgroundColor: showStatusPoint(lchw3Point) ? '#10B981' : '#EF4444' }" />
              {{ lchw3PointCode }}
            </div> -->
          </div>
        </div>
        <div class="humidnessDom4">
          <chartsHumidness
            :color="'#3B82F6'"
            :ooctag="false"
            :title="mchwPointName"
            :jobId="point2"
            :width="'100%'"
            :height="'100%'"
            :max="zwbsMax"
            :min="zwbsMin"
            :unit="mchwPointUnit"
            :type="`${dark ? 'dark' : ''}`"
          />
          <div class="bg-purple">
            <div v-if="zwbsName != ''" class="bg-text">{{ zwbsName }}</div>
            <div v-if="zwbsPoint && zwbsUnit" class="bg-value">{{ zwbsPoint }}{{ zwbsUnit }}</div>
            <div v-if="zwbsName1 != ''" class="bg-text">{{ zwbsName1 }}</div>
            <div v-if="zwbsPoint1 && zwbsUnit1" class="bg-value">{{ zwbsPoint1 }}{{ zwbsUnit1 }}</div>
            <!-- <div class="bg-small">
              {{ mchwPointName + ":" + (mchwPointValue == null ? "-" : mchwPointValue) + mchwPointUnit }}
            </div> -->
            <!-- <div class="bg-small">
              {{ mchwPointName1 + ":" + (mchwPointValue1 == null ? "-" : mchwPointValue1) + mchwPointUnit1 }}
            </div>
            <div class="bg-small">
              {{ mchwPointName2 + ":" + (mchwPointValue2 == null ? "-" : mchwPointValue2) + mchwPointUnit2 }}
            </div> -->
            <!-- <div class="bg-small">
              <span class="status_point" :style="{ backgroundColor: showStatusPoint(mchw1Point) ? '#10B981' : '#EF4444' }" />
              {{ mchw1PointCode }}
            </div>
            <div class="bg-small">
              <span class="status_point" :style="{ backgroundColor: showStatusPoint(mchw2Point) ? '#10B981' : '#EF4444' }" />
              {{ mchw2PointCode }}
            </div>
            <div class="bg-small">
              <span class="status_point" :style="{ backgroundColor: showStatusPoint(mchw3Point) ? '#10B981' : '#EF4444' }" />
              {{ mchw3PointCode }}
            </div>
            <div class="bg-small">
              <span class="status_point" :style="{ backgroundColor: showStatusPoint(mchwchr1Point) ? '#10B981' : '#EF4444' }" />
              {{ mchwchr1PointCode }}
            </div>
            <div class="bg-small">
              <span class="status_point" :style="{ backgroundColor: showStatusPoint(mchwchr2Point) ? '#10B981' : '#EF4444' }" />
              {{ mchwchr2PointCode }}
            </div>
            <div class="bg-small">
              <span class="status_point" :style="{ backgroundColor: showStatusPoint(mchwPoint) ? '#10B981' : '#EF4444' }" />
              {{ mchwPointCode }}
            </div> -->
          </div>
        </div>
        <div class="humidnessDom4">
          <chartsHumidness
            :color="'#3B82F6'"
            :ooctag="false"
            :title="zwrsPointName"
            :jobId="point3"
            :width="'100%'"
            :height="'100%'"
            :max="zwrsMax"
            :min="zwrsMin"
            :unit="zwrsPointUnit"
            :type="`${dark ? 'dark' : ''}`"
          />
          <div class="bg-purple">
            <div v-if="zwrsName != ''" class="bg-text">{{ zwrsName }}</div>
            <div v-if="zwrsPoint && zwrsUnit" class="bg-value">{{ zwrsPoint }}{{ zwrsUnit }}</div>
            <div v-if="zwrsName1 != ''" class="bg-text">{{ zwrsName1 }}</div>
            <div v-if="zwrsPoint1 && zwrsUnit1" class="bg-value">{{ zwrsPoint1 }}{{ zwrsUnit1 }}</div>
            <!-- <div class="bg-small">
              {{ zwrsPointName + ":" + (zwrsPointValue == null ? "-" : zwrsPointValue) + zwrsPointUnit }}
            </div>
            <div class="bg-small">
              {{ zwrsPointName1 + ":" + (zwrsPointValue1 == null ? "-" : zwrsPointValue1) + zwrsPointUnit1 }}
            </div> -->
          </div>
        </div>
        <div class="humidnessDom4">
          <chartsHumidness
            :color="'#3B82F6'"
            :ooctag="false"
            :title="gwrsPointName"
            :jobId="point4"
            :width="'100%'"
            :height="'100%'"
            :max="gwrsMax"
            :min="gwrsMin"
            :unit="gwrsPointUnit"
            doubleXaxis
            :type="`${dark ? 'dark' : ''}`"
          />
          <div class="bg-purple">
            <div v-if="gwrsName != ''" class="bg-text">{{ gwrsName }}</div>
            <div class="bg-value">{{ gwrsPoint }}{{ gwrsUnit }}</div>
            <div v-if="gwrsName1 != ''" class="bg-text">{{ gwrsName1 }}</div>
            <div class="bg-value">{{ gwrsPoint1 }}{{ gwrsUnit1 }}</div>
            <!-- <div class="bg-small">
              {{ gwrsPointName + ":" + (gwrsPointValue == null ? "-" : gwrsPointValue) + gwrsPointUnit }}
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.model-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;

  .model-title-slot {
    display: flex;
    gap: 16px;
    align-items: center;

    .right-text {
      font-weight: 600;
      line-height: 1;
      color: var(--px-color-primary);
    }

    .px-icon {
      cursor: pointer;
    }
  }

  .model_chart_con {
    width: 100%;
    height: calc(100% - v-bind(title_height));

    .cus_con {
      display: flex;
      flex-flow: row nowrap;
      gap: 6px;
      // justify-content: space-between;
      width: 100%;
      height: 100%;

      .humidnessDom4 {
        display: flex;
        flex-flow: row nowrap;
        gap: 5px;
        width: 24.5%;
        height: 100%;

        .bg-purple {
          display: flex;
          flex-flow: column nowrap;
          gap: 3px;
          width: 32%;
          height: 100%;
          padding: 5px;
          overflow: auto;
          background-color: #eff6ff;
          background-image: url("@/assets/svg/machine/temp.svg");
          background-repeat: no-repeat;
          background-position: right 5px bottom 5px;
          background-origin: content-box;
          border-radius: 4px;

          &::-webkit-scrollbar {
            display: none;
          }

          .bg-value {
            font-size: clamp(12px, 1vw, 16px);
            color: #3b82f6;
          }
        }
      }
    }
  }
}

.bg-small {
  font-size: 10px;
  white-space: nowrap;
}

.boxShadow {
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.borderRidus {
  border-radius: 4px;
}

.model-title-com-dark {
  color: #fff;
  background-color: #001e3b;
  border: 1px solid #83b2ff;
  box-shadow: inset 0 0 10px 0 #83b2ff;

  .bg-purple {
    background-color: #0e2b4f !important;
    background-image: url("@/assets/svg/machine/dark_temp.svg") !important;

    .bg-value {
      font-size: clamp(12px, 1.25vw, 24px);
      color: #00c2ff !important;
    }
  }

  .title-text {
    color: #fff;
  }

  :deep(.model-title-com) {
    border-color: #00c2ff !important;
  }
}

.status_point {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.bg-text {
  font-size: clamp(10px, 0.8vw, 16px);
  font-weight: 600;
}

.bg-value {
  font-weight: 600;
}
</style>
